<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>script标签学习</title>
</head>
<body>
    注意：
    1.如果 script 无 src 属性，则 defer, async 会被忽略
    2.动态添加的 script 标签隐含 async 属性

    区别：
    sync（不阻塞页面渲染） 代表异步加载文档
    defer（不阻塞页面渲染） 等dom渲染完毕之后在加载
    默认（阻塞页面渲染） 同步

    <!-- 比较：浏览器延迟加载 -->
        <!-- <script src="a.js"></script>
            停止解析 document.
            请求 a.js
            执行 a.js 中的脚本
            继续解析 document
        <div>阻塞hello输出，脚本加载完成后立即执行</div> -->

        <!-- <script src="a.js" async></script>
            <script src="b.js" async></script>
            不阻止解析 document, 并行下载 a.js, b.js
            当脚本下载完后立即执行。（两者执行顺序不确定，执行阶段不确定，可能在 DOMContentLoaded 事件前或者后 ）

        <div>不阻塞hello输出,脚本异步加载完成后立即执行</div>

        <script src="c.js" defer></script>
        <script src="d.js" defer></script>
        不阻止解析 document， 并行下载 c.js, d.js
        即使下载完 c.js, d.js 仍继续解析 document
        按照页面中出现的顺序，在其他同步脚本执行后，DOMContentLoaded 事件前 依次执行 c.js, d.js。

        <div>不阻塞hello输出,脚本先并行加载等dom渲染完之后立即执行</div> -->
  

    <!-- 加载相同的文件，浏览器会先取缓存，没有再请求 -->
        <!-- <script src="a.js"></script>
        <script src="a.js"></script> -->


    <!-- 加载相同的文件但是uri不一样，最好加个t,这样每次浏览器都会重新请求，不会缓存 -->
        <!-- <script src="a.js"></script>
        <script src="a.js?t=123"></script> -->
</body>
</html>